<!-- <script setup>
import { ref } from "vue";

import WebVideo from "./components/WebVideo/index.vue";

const webrtcurl1 =
  "http://localhost:8183/stream/172.16.0.241/channel/33/webrtc";

const webrtcurl2 =
  "http://localhost:8183/stream/172.16.0.241/channel/34/webrtc";
</script>

<template>
  <WebVideo :webrtcUrl="webrtcurl1" />
  <WebVideo :webrtcUrl="webrtcurl2" />
</template>

<style scoped>
#app {
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: 100vh;
}
</style> -->

<template>
  <el-container>
    <!-- 侧边栏 -->
    <el-aside width="250px">
      <a class="sidebar__logo" href="#">
        <span class="sidebar__logo-text">海康威视 Demo</span>
      </a>

      <el-divider />

      <div class="sidebar__menu">
        <router-link class="sidebar__menu-item" to="/dashboard">
          <span class="sidebar__menu-text">仪表盘</span>
        </router-link>
        <router-link class="sidebar__menu-item" to="/preview">
          <span class="sidebar__menu-text">预览</span>
        </router-link>
        <router-link class="sidebar__menu-item" to="/video-playback">
          <span class="sidebar__menu-text">视频回放</span>
        </router-link>
        <router-link class="sidebar__menu-item" to="/video-download">
          <span class="sidebar__menu-text">视频下载</span>
        </router-link>
      </div>
    </el-aside>

    <!-- 内容区域 -->
    <el-main>
      <router-view></router-view>
    </el-main>
  </el-container>
</template>

<script setup></script>

<style scoped>
.el-container {
  height: 100%;
  background-color: lightblue;
}

.el-aside {
  background-color: gray;
}

.sidebar {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 250px;
  height: 100%;
  padding: 20px 0;
  background-color: #f5f5f5;
}

.sidebar__logo {
  display: flex;
  align-items: center;
  color: #333;
}

.sidebar__logo-text {
  font-size: 20px;
  font-weight: bold;
}

.sidebar__menu {
  width: 100%;
  font-size: 16px;
}

.sidebar__menu-item {
  display: flex;
  align-items: center;
  padding: 16px 32px;
  text-decoration: none;
  color: #333;
  transition: background-color 0.3s;
}

.sidebar__menu-item:hover {
  background-color: #e0e0e0;
}

.sidebar__menu-item:focus {
  background-color: #e0e0e0;
}
</style>
